<template>
  <div class="parent-classromm">
    <div class="header">
      <div class="icon iconfont icon-huanying"></div>
      <div class="text">家长朋友们, 欢迎您的到来！</div>
    </div>
    <div class="swiper-wrap">
      <SwiperWrap :dataList="swiperDataList" @jump="jump" />
    </div>
    <div class="card-list-2">
      <Card :class="['card-item', item.bg]" v-for="item of card4" :key="item" @jump="jump(item.route)">
        <div class="title-wrap">
          <div :class="['icon iconfont', item.icon]"></div>
          <div class="text">{{ item.title }}</div>
        </div>
        <div class="msg">{{ item.msg }}</div>
      </Card>
    </div>
    <div class="essay-read-wrap">
      <NavArea icon="icon-wenzhangyuedu" title="点击排行"
        @click="jump({ path: '/SearchPage', query: { status: 'introduce' } })"></NavArea>
      <div class="list-wrap" v-if="dataList && dataList.length > 0">
        <List :finished="finished" @loadData="getDataList" @reFresh="handleRefresh">
          <ListItem class="list-item" v-for="item of dataList" :key="item" :item="item"
            @jump="jump({ path: `/VideoPlay/${item.videoId}` })"></ListItem>
        </List>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, toRefs, onMounted, inject } from 'vue';
import { getHomeVideoList, getSwiperList } from '@/api/parentClassroom.js';
import { useRouter } from 'vue-router';

const card4 = ref([
  { icon: 'icon-diannao', title: '家长微课', msg: '微课学习', route: { path: '/SearchPage', query: { status: 'jzwk' } }, bg: 'bg1' },
  { icon: 'icon-zixun1', title: '家教资讯', msg: '资讯掌握', route: { path: '/Message', query: { status: 'jjzx' } }, bg: 'bg2' },
  { icon: 'icon-a-shuben2', title: '好书推荐', msg: '阅读自有力量', route: { path: '/Message', query: { status: 'hstj' } }, bg: 'bg3' },
  { icon: 'icon-mo', title: '育儿心得', msg: '育儿经验分享', route: { path: '/Message', query: { status: 'yexd' } }, bg: 'bg4' }
])

const card1 = ref([
  { icon: 'active icon-dianzan_kuai', title: '网上课堂', msg: '视频，图文' },
])


const page = ref({
  currentPage: 1,
  pageSize: 20,
  sort: "desc",
  sidx: "playCount"
});

const column = ref(2);
const dataList = ref([]);
const finished = ref(false);

//  下拉刷新
const handleRefresh = () => {
  page.value.currentPage = 1;
  finished.value = false;
  dataList.value = []
  debounce(getDataList, 800)();
}

//  防抖
function debounce(func, delay) {
  let timeout
  return function () {
    const _this = this
    const args = [...arguments]
    if (timeout) {
      clearTimeout(timeout)
    }
    timeout = setTimeout(() => {
      func.apply(_this, args)
    }, delay)
  }
}


onMounted(async () => {
  const toast = inject('loading');
  toast.showLoading();
  await Promise.all([
    //  加载轮播图数据
    setSwiperList(),
    getDataList()
  ])

  toast.hideLoading();
})

const router = new useRouter();

//  页面跳转
const jump = (options) => {
  router.push(options);
}

//  请求数据
async function getDataList() {
  if (finished.value) return;
  const { code, data } = await getHomeVideoList(page.value);

  if (code == 200) {
    const { currentPage, pageSize, total } = data.pagination;
    // 判断是否到底
    if (currentPage * pageSize >= total) {
      finished.value = true;
    }

    //  格式化数据
    dataList.value = dataList.value.concat(setDataList(data.list));
    //  准备加载新的数据
    page.value.currentPage++;
  }
}

const swiperDataList = ref([]);

//  请求轮播图数据, 并进行处理
async function setSwiperList() {
  const { code, data } = await getSwiperList();
  if (code === 200) {
    swiperDataList.value = data.list.map(item => {
      try {
        item.image = JSON.parse(item.image);
        item.imageUrl = item.image[0].url ? process.env.VITE_API_API_IMAGE_URL + item.image[0].url : '';
      } catch (ev) {
        item.imageUrl = ''
      }

      return item;
    })
  }
}

//  处理数据格式
function setDataList(data) {
  const _data = [...data].map(item => {
    //  处理图片
    try {
      item.videoPic = JSON.parse(item.videoPic);
      item.image = item.videoPic[0].url ? process.env.VITE_API_API_IMAGE_URL + item.videoPic[0].url : '';
    } catch (ev) {
      item.image = '';
    }

    //  处理视频
    try {
      item.videoFile = JSON.parse(item.videoFile);
      item.videoSource = item.videoFile[0].fileId || '';
    } catch (ev) {
      item.videoSource = '';
    }

    return item;
  });

  return _data;

  // //  容器
  // let arr = [];
  // const result = _data.reduce((prev, item, index) => {
  //   console.log('dddd', item, index);
  //   if (index % column.value === 0) {
  //     const len = prev.length;
  //     prev[len] = [item];
  //     arr = prev[len];
  //   } else {
  //     arr.push(item);
  //   }
  //   return prev;
  // }, []);

  // return result;
}
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  align-items: center;
  height: 4rem;
  box-sizing: border-box;

  .iconfont {
    background-image: linear-gradient(to top right, green, white);
    -webkit-background-clip: text;
    color: transparent;
    font-size: 2.4rem;
    font-weight: bold;
  }

  .text {
    margin-left: .6rem;
    font-size: 1.4rem;
  }
}

.card-list-2 {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

  .card-item {
    margin-top: 1rem;
    padding-left: 2rem;
    padding-top: 1rem;
    width: 16.6rem;
    height: 9.6rem;
    border-radius: 1rem;
    overflow: hidden;
    box-sizing: border-box;

    &.bg1 {
      background: center / contain no-repeat url("@/assets/images/1.png");
    }

    &.bg2 {
      background: center / contain no-repeat url("@/assets/images/2.png");
    }

    &.bg3 {
      background: center / contain no-repeat url("@/assets/images/3.png");
    }

    &.bg4 {
      background: center / contain no-repeat url("@/assets/images/4.png");
    }

    .title-wrap {
      display: flex;
      align-items: center;

      .iconfont {
        background-image: linear-gradient(to top right, green, white);
        -webkit-background-clip: text;
        color: transparent;
        font-size: 2.4rem;
        font-weight: bold;
      }

      .text {
        margin-left: .6rem;
        font-size: 1.4rem;
      }
    }

    .msg {
      margin-top: .8rem;
      font-size: 1.2rem;
      color: #777;
    }
  }
}

.card-list-1 {
  margin-top: 1rem;

  .card-item {
    margin-top: 2rem;
    padding-left: 2rem;
    padding-top: 1rem;
    height: 9rem;
    border-radius: 2rem;
    box-sizing: border-box;
    border: 1px solid red;

    .title-wrap {
      display: flex;
      align-items: center;

      .iconfont {
        font-size: 2rem;
      }

      .text {
        margin-left: .6rem;
        font-size: 1.4rem;
      }
    }

    .msg {
      margin-top: .8rem;
      font-size: 1.2rem;
      color: #777;
    }
  }
}

// 多行省略
.ellipsis-multiline {
  word-break: break-all;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}


.parent-classromm {
  padding: 0 1.4rem;
  box-sizing: border-box;

  .search-box {
    display: flex;
    align-items: end;

    .add-require {
      width: 8rem;
      text-align: right;
      font-size: 1.4rem;
      color: rgb(22, 155, 213);
    }
  }

  .swiper-wrap {
    border-radius: .6rem;
    overflow: hidden;
  }

  .essay-read-wrap {
    background: #fff;
    border-radius: 1rem;

    .list-wrap {
      padding: 0 1rem;
      box-sizing: border-box;

      .list-item {
        background-image: linear-gradient(to right, #fff, rgba(245, 240, 251, 255));
      }

      .inner-wrap {
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        justify-content: space-between;
      }

      .text {
        font-size: 1.4rem;
      }

      .item-msg {
        display: flex;
        justify-content: space-between;
        margin-top: .6rem;
        color: #aaa;
        font-size: 1.2rem;
      }
    }
  }
}

.search-wrap {
  display: flex;

  .search-input-box {
    width: 10rem;
  }
}
</style>
